<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>wwh 学习代码</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
    </head>
    <body>
        <div id="app">{{message}}
            <div :id="message"></div>
            <todo-list></todo-list>
        </div>
    </body>
    <script>

        Vue.component("todo-item",{
            props:{
                value:String,
                del:{
                    Type:Boolean,
                    default:false
                }
            },

            template:`            
                 <li>
                    <span v-if="!del">{{value}}</span>
                    <span v-else style="background-color: aquamarine;">{{value}}</span>
                    <button v-show="!del" @click="handleClick">删除</button>
                </li>'
                `,
            data:function(){
                return {}
            },
            methods:{
                handleClick(){
                    console.log("aaa");
                    this.$emit('delete',this.value)
                }
            }
        })

        Vue.component("todo-list",{
            template:
            `
            <ul>
                <todo-item @delete="handleDelete" v-for="item in list" :value="item.value" :del="item.del"></todo-item>
            </ul>
            `,
            data:function(){
                return{
                    list:[
                    {
                        value:'课程一',
                        del:false
                    },
                    {
                        value:'课程二',
                        del:true
                    }
                ]
                }
            },

            methods:{
                handleDelete(val){
                    console.log("handleDelete",val)
                }
            }
        })


        var vm=new Vue({
            el:'#app',
            data:{
                message:'hello',
                list:[
                    {
                        value:'课程一',
                        del:false
                    },
                    {
                        value:'课程二',
                        del:true
                    }
                ]
            },
        })
    </script>
</html>